<template>
  <div class="doctoer">
    <mt-header fixed>
      <mt-button @click="$router.go(-1)" slot="left" icon="back"></mt-button>
      <div class="headerRight" slot="right">
        <img @click="love" :src="require(`@/assets/images/home/love${ont}.png`)" alt="" />
      </div>
    </mt-header>
    <div class="content" v-if="infor">
      <!-- 头像加医生 -->
        <div class="photo">
            <div>
              <img :src="infor[0].head" alt="">
            </div>
            <div>
              <span>{{infor[0].dname}}</span>
              <div><span>{{infor[0].lv}}</span></div>
            </div>
        </div>
        <!-- 好评率 -->
        <div class="good">
          <ul>
            <li>
              <span>{{infor[0].pingfen}}</span>
              <span>好评率</span>
            </li>
            <li>
              <span>{{infor[0].price_old}}</span>
              <span>关注量</span>
            </li>
            <li>
              <span>{{infor[0].yuyue}}</span>
              <span>预约量</span>
            </li>
          </ul>
        </div>
        <!-- 专业资历 -->
        <div class="major">
          <span>{{infor[0].lv}}</span>
        </div>
        <!-- 医生介绍 -->
        <div class="F3">
         <p :class="{ open: isOpen == false }">
            <b>医院介绍:</b>
            {{infor[0].introduce}}
          </p >
          <div class="F4">
            <div
              class="open"
              @click="spread"
              v-html="isOpen ? '收起更多介绍' : '展开更多介绍'"
            ></div>
          </div>
        </div>
        <!-- 擅长疾病 -->
        <div class="adept">
          <p>擅长疾病</p>
          <p>擅长:&nbsp;{{infor[0].strong}}</p>
        </div>
        <!-- 门诊挂挂号 -->
        <div class="registration">
          <span>门诊挂号</span>
          <div>
            <span>出诊医院:&nbsp;北京天使儿童医院</span>
            <span>可预约</span>
          </div>
          <div class="time">
            <div>
              <span>上午</span>
              <span>下午</span>
            </div>
            <div>
              <ul>
                <li v-for="({date,mor,after},i) in dates" :key="i">
                  <span>{{date}}</span>
                  <span>{{weeks[i] | week}}</span>
                  <!-- active加了为无号|号满 -->'
                  <span :class=" mor ? '' : 'active'" @click="goto">{{mor ? '预约' :  '无号'}}</span>
                  <span :class=" after ? '' : 'active'" @click="goto">{{mor ? '预约' :  '无号'}}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 用户评价 -->
        <div class="evaluate">
          <div>
            <span>用户评价</span>
            <span>评价数61条</span>
          </div>
          <div>
            <span>{{infor[0].pingfen}}</span>
            <span>非常好</span>
          </div>
          <div>
            <ul>
              <li v-for="{cid,phone,tim,content,star} in comment" :key="cid">
                <div>
                  <div>
                      <span>{{phone}}</span>
                      <img v-for="v in star" :key="v" src="@/assets/images/home/star_on.svg" alt="" />
                      <img v-for="v in 5-star" :key="v+4" src="@/assets/images/home/star.svg" alt="" />
                  </div>
                  <span>{{tim}}</span>
                </div>
                <p>{{content}}</p>
              </li>
            </ul>
          </div>
        </div>
    </div>
    <!-- 底部 -->
    <div class="buttom">
      <button @click="goto">预约挂号</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
       isOpen: false,weeks:[],dates:[],infor:null,comment:[],
       did:this.$route.fullPath.split('?')[1],ont:'',
    }
  },
  methods: {
    love(){
      if(this.$store.state.phone){
        if(this.ont == ''){
          this.ont = '1'
          let parms = `ysid=${this.infor[0].did}&yhid=${this.$store.state.phone}`
          this.axios.post(`/ufocus`,parms).then(res=>{
              this.$toast({
                message: res.data.msg,
                position: 'center',
                duration: 1000
              });
            })
        }else{
          this.ont = ''
          this.axios.delete(`/ufocus_del?ysid=${this.infor[0].did}&yhid=${this.$store.state.phone}`).then(res=>{
              this.$toast({
                message: res.data.msg,
                position: 'center',
                duration: 1000
              });
            })
        }
      }else{
        this.$messagebox({
          title: '登陆后才可收藏',
          message: '需要跳转登录页面吗?',
          showCancelButton: true
        }).then(res=>{
          if(res=='confirm'){
            this.$router.push('/register')
          }
        })
      }
    },
    goto(){
      if(this.$store.state.phone){
        this.$router.push(`/signal?lid=${this.infor[0].did}`)
      }else{
        this.$messagebox({
          title: '登陆后才可预约',
          message: '需要跳转登录页面吗?',
          showCancelButton: true
        }).then(res=>{
          if(res=='confirm'){
            this.$router.push('/register')
          }
        })
      }
    },
     spread() {
       !this.isOpen ? (this.isOpen = true) : (this.isOpen = false);
     },
     getData(url,callback){
      this.axios.get(url).then(res=>{
        callback(res.data.data)
      })
     },
     registration:function(){
      for(let i=0; i<14; i++){
        // 请求做把请求到的做对比,然后push一个对象,dates{date,是否上班}
        let date = this.$moment(new Date()).subtract(-i, "days").format("MM-DD") 
        this.dates.push({date:date})
        let week = this.$moment().subtract(-i, "days").format('E')
        this.weeks.push(week)
      }
    },
  },
  filters: {
    week(value) {
       switch(value*1){
          case 1:
            return '周一'
          break
          case 2:
            return '周二'
          break
          case 3:
            return '周三'
          break
          case 4:
            return '周四'
          break
          case 5:
            return '周五'
          break
          case 6:
            return '周六'
          break
          case 7:
            return '周日'
          break
        };
    }
  },
  mounted(){
    this.getData(`/doctor_zili?did=${this.did}`,(data)=>{
      this.infor = data
      // 请求排班表
    // 用什么用医生的id还是医生的名字
      this.getData(`/doctor_state?sname=${this.infor[0].dname}`,(data)=>{
      this.registration()
      if(!data)return
      data.forEach(stime=>{
        this.dates.forEach((date,i)=>{
          if(stime.stime==date.date){
            this.dates[i] = {date:date.date,mor:stime.scount/2,after:stime.scount/2}
          }
        })
      })
    })
    })
    this.getData(`/users/comment`,(data)=>{this.comment = data})
    this.axios.get(`/ufocus_one?ysid=${this.did}&yhid=${this.$store.state.phone}`).then(res=>{
      if(res.data.code == 200 && this.$store.state.phone){
        this.ont = '1'
      }else{
        this.ont = ''
      }
    })
  },
};
</script>

<style lang="scss" scoped>
.mint-header {
  background: #f3f4f6;
  color: #000;
}
.headerRight {
  width: 10vw;
  margin-left: 30vw;
  margin-top: 3vw;
  img {
    width: 100%;
    display: block;
  }
}
.content {
  width: 92vw;
  margin: 0 auto;
  .photo {
    padding: 0 2vw;
    height: 10vh;
    display: flex;
    > div:nth-child(1) {
      overflow: hidden;
      width: 12vw;
      height: 12vw;
      border-radius: 100%;
      margin-top: 2vw;
      > img {
        display: block;
        width: 100%;
      }
    }
    > div:nth-child(2) {
      padding-top: 4vw;
      margin-left: 2vw;
      > span {
        font-size: 1.3rem;
        font-family: "楷体";
        font-weight: 600;
      }
      > div {
        margin-top: 1vh;
        > span {
          margin-right: 2vh;
          font-family: "楷体";
        }
      }
    }
  }
}
.good {
  > ul {
    width: 65vw;
    display: flex;
    margin-left: 20vw;
    margin-top: 2vw;
    justify-content: space-evenly;
    li {
      padding: 1vw 2vh;
      display: flex;
      flex-direction: column;
      text-align: center;
      > span {
        &:nth-child(1) {
          font-weight: 600;
          font-size: 1.5rem;
        }
        &:nth-child(2) {
          margin-top: 1vh;
          font-family: "楷体";
          font-size: 1rem;
        }
      }
    }
  }
}
.major {
  height: 14vh;
  background-image: url("/public/image/home/bg.png");
  background-size: 100%;
  background-repeat: no-repeat;
  border-radius: 3vw 3vw 0 0;
  position: relative;
  > span {
    color: #fff;
    font-family: "楷体";
    font-size: 1.1rem;
    position: absolute;
    top: 50%;
    left: 5vw;
  }
}
.F3 {
  background: rgb(255, 255, 255);
  margin: 1.5vh 0;
  padding: 2vw 3vw;
  height: fit-content;
  border-radius: 3vw;
  > p {
    > b {
      color: #000;
    }
    font-family: "楷体";
    color: rgb(80, 80, 80);
    line-height: 2.5vh;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    &.open {
      display: -webkit-box;
    }
  }
}
.F4 {
  margin-top: 1vw;
  > div {
    margin: 0 auto;
    width: 50%;
    text-align: center;
    padding: 1vw 5vw;
    background-color: rgb(255, 255, 255);
    border-radius: 0.25rem;
    color: #1397d7;
  }
}
.adept {
  background: #fff;
  color: rgb(80, 80, 80);
  padding: 1vh 2vw;
  font-size: 1.2rem;
  border-radius: 3vw;
  > p {
    &:nth-child(1) {
      font-weight: 600;
      margin: 1vw 0;
      color: #000;
    }
    &:nth-child(2) {
      letter-spacing: 0.2vw;
      font-family: "楷体";
      font-size: 1.1rem;
    }
  }
}
.registration {
  margin-top: 1vh;
  background: #fff;
  padding: 1vh 2vw;
  border-radius: 3vw;
  > span {
    font-weight: 600;
    font-size: 1.2rem;
    margin: 1vw 0;
    color: #000;
    display: block;
    padding-bottom: 2vw;
    border-bottom: 1px solid rgb(241, 241, 241);
  }
  > div:nth-child(2) {
    display: flex;
    justify-content: space-between;
    margin: 1vh 0;
    > span:nth-child(2) {
      background: #00d5b9;
      color: #fff;
      font-size: 0.6rem;
      padding: 0.5vw 1vw;
      border-radius: 1vw;
    }
  }
  .time {
    display: flex;
    height: 20vh;
    > div:nth-child(1) {
      width: 30%;
      display: flex;
      flex-direction: column;
      > span {
        display: block;
        width: 100%;
        text-align: center;
        font-size: 1rem;
        &:nth-child(1) {
          margin-top: 9vh;
          margin-bottom: 3vh;
        }
        padding-bottom: 1vw;
      }
    }
    > div:nth-child(2) {
      width: 70%;
      overflow: scroll;
      &::-webkit-scrollbar {
        display: none;
      }
      > ul {
        height: 100%;
        width: 16vw * 14;
        li {
          width: 10vw;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          text-align: center;
          margin-right: 6vw;
          float: left;
          > span {
            display: block;
            &:nth-child(1) {
              font-weight: 600;
            }
            &:nth-child(3),
            &:nth-child(4) {
              background: #00d5bb;
              width: 5vh;
              height: 5vh;
              border-radius: 100%;
              margin: 1vw auto;
              line-height: 5vh;
              color: #fff;
              font-size: 0.8rem;
              &.active {
                background: #c9c9c9;
                pointer-events: none;
              }
            }
          }
        }
      }
    }
  }
}
.evaluate {
  padding: 1vh 2vw;
  background: #fff;
  margin-top: 1vh;
  border-radius: 3vw;
  > div:nth-child(1) {
    display: flex;
    justify-content: space-between;
    > span:nth-child(1) {
      font-size: 1.2rem;
      font-weight: 600;
    }
    > span:nth-child(2) {
      font-family: "楷体";
      color: #a3a3a3;
    }
  }
  > div:nth-child(2) {
    display: flex;
    margin-top: 2vh;
    margin-left: 2vh;
    flex-direction: column;
    > span:nth-child(1) {
      font-size: 2rem;
      color: #f00;
    }
    > span:nth-child(2) {
      font-family: "楷体";
      font-weight: 600;
    }
  }
  > div:nth-child(3) {
    width: 100%;
    ul {
      display: flex;
      flex-direction: column;
      li {
        height: 10vh;
        margin-top: 1vh;
        border-bottom: 1px solid rgb(223, 223, 223);
        > div {
          display: flex;
          justify-content: space-between;
          > div {
            width: 30vw;
            height: 2vh;
            display: flex;
            > span {
              display: inline-block;
              margin-right: 2vw;
            }
            > img {
              height: 100%;
              display: block;
            }
          }
        }
        > p {
          margin-top: 1vh;
          overflow: hidden;
          line-height: 2.5vh;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          display: -webkit-box;
        }
      }
    }
  }
}
.buttom {
  background: #fff;
  width: 100vw;
  height: 12vw;
  position: fixed;
  bottom: 0;
  > button {
    width: 50vw;
    height: 8vw;
    display: block;
    border: none;
    border-radius: 10vw;
    background-color: #00d5b9;
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
.doctoer {
  &::after {
    content: "";
    display: block;
    height: 13vw;
  }
  background: #f3f4f6;
  &::before {
    content: "";
    display: block;
    height: 10vh;
  }
}
</style>
